/**
 * Created by kobe on 16/08/10
 */


const lf = liefeng,
    R = React,
    RC = React.createClass,
    ajax = lf.utils.ajax,
    doAction = lf.bridgeJs.doAction,
    translateTime = lf.utils.format;

let now = new Date(),
    y = now.getFullYear(),
    m = translateTime(now.getTime(), 'MM'),
    d = translateTime(now.getTime(), 'dd'),
    month = y + '-' + m + '-' + d;

const Root = RC({
    getInitialState(){
        return ({
            list: [],
            time: '',
            scheduleNameList: [],
            monthList: [],
            isNo: '',
        })
    },
    componentWillMount(){
        this.getList();
        let me = this;
        ajax({
            type: "get",
        }, lf.api.attendance.defineList, (data) => {//获取排班定义列表
            me.setState({
                scheduleNameList: data,
                isNo: data.length ? 'no' : 'yes',
            })
        })
        me.getMonthList();
    },
    getMonthList(){
        let me = this,
            user = this.props.user;

        ajax({
            type: "get",
            data: {
                staffId: user.id,
                month: month,  //查询月份【如果是2016年08月，则传2016-08-01】
            },
        }, lf.api.attendance.planList4Month, (data) => { //1.planList4Month(按月查询) 2.planList(按周查询)

            let monthList = [];

            data.map(function (d) {
                let event = {
                    title: '',
                    start: d.schedulingDate,
                    name: d.schedulingName,
                }
                d.schedulingDate == month ? monthList.push(event) : '';
            })

            me.setState({
                monthList: monthList,

            })
        })
    },
    getTime(){
        var _Date = new Date(),
            data = _Date.getHours() + ':' + _Date.getMinutes(),
            me = this;
        me.setState({
            time: data
        })
    },
    getList(user = this.props.user){
        ajax({
            type: 'GET',
            data: {
                staffId: user.id,
            },
            success: function (data) {
                //成功
                if (data.code == '200') {
                    this.setState({
                        list: data.dataList
                    })
                }
                else {
                    alert(data.desc);
                }
            }.bind(this)
        }, lf.api.attendance.list);
    },
    clockFn(){
        lf.appJs.getIBeaconInfo('ffffffff-ffff-ffff-0001-000000000000', (data) => {
            console.log('success');
            console.log(data);
            
            if (data == 'fail') {
                alert('请靠近打卡设备!');
                return;
            } else {
                this.clockSuccessFn(data);
            }
        });
    },
    clockSuccessFn(locationData){
        ajax({
            type: 'POST',
            data: {
                staffId: this.props.user.id,
                busiType: 1,    //1为考勤,2为签到 暂时只需要考勤
                uuid: locationData.proximityUuid,
                major: locationData.major,
                minor: locationData.minor,
            },
            success: function (data) {
                //成功
                if (data.code == '200') {
                    alert('打卡成功');
                    this.getList();
                }
                else {
                    alert(data.desc);
                }
            }.bind(this)
        }, lf.api.attendance.create);
    },
    render(){
        let me = this,
            monthList = me.state.monthList,
            list = me.state.scheduleNameList.map(function (info) {
                for (let i = 0; i < monthList.length; i++) {
                    if (info.name == monthList[i].name) {
                        let startArr = info.workStarttime.split(':'),
                            endArr = info.leaveStarttime.split(':'),
                            startArr1 = info.workEndtime.split(':'),
                            endArr1 = info.leaveEndtime.split(':'),
                            start = startArr[0] + ':' + startArr[1],
                            start1 = startArr1[0] + ':' + startArr1[1],
                            end1 = endArr1[0] + ':' + endArr1[1],
                            end = endArr[0] + ':' + endArr[1];
                        return (
                            <div>
                                {info.name + ' : ' + start + '-' + end + ' / ' + start1 + '-' + end1}
                            </div>
                        )
                    }
                }
            })

        // var list = this.state.list.map((data, index) => {
        //     if (index < 4) {
        //         return (
        //             <div>打卡时间: {translateTime(data.recordTime)}</div>
        //         )
        //     }
        // })
        return (
            <div className="clock-in">
                {
                    list.length ?
                        <div className={"top-list " + (list.length ? 'bgColor' : '')}>{list}</div>
                        : this.state.isNo == 'yes' ? <div className={"top-list bgColor no-plan"}>暂无排班</div> : null
                }
                <a className="clock-btn" href="javascript:;" ref="clock-btn" onTouchEnd={this.clockFn}>
                    <p className="clock">打 卡</p>
                </a>
                <div className="flex">
                    <a className="history flex-item" ref="history" href="javascript:;" onTouchEnd={()=>{
                    doAction('clock-history.html','打卡记录')
                }}>打卡记录</a>
                    <a className="history flex-item" href="javascript:;" onTouchEnd={()=>{
                    doAction('calendar.html','考勤记录');
                }}>考勤记录</a>
                </div>
            
            </div>
        )
    }
    
})

lf.appJs.getUser(function (user) {
    R.render(<Root user={user}/>, document.getElementById('root'), function () {
        $('#root').css('background', 'none');
        $('.clock-in').height($(window).height());
    });
});
